<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title></title>
    <script type="text/javascript">
    
    window.onload = function() {
    	var p1_jianzhi = document.getElementById("p1_jianzhi");
		var page1 = document.getElementById("page1");
		var page2 = document.getElementById("page2");
	
	p1_jianzhi.addEventListener("touchstart",function(){
		setTimeout(function(){
			page1.style.display = "none";
			page2.style.display = "block";			
		},2000);
			page1.setAttribute("class","page1_2");
		},false);			
				
		
		var canvas = document.getElementById("canvas");
			canvas.width = document.body.clientWidth;
			canvas.height = document.body.clientHeight;
			
			var snow_x = new Array();
			var snow_y = new Array();
			var fontSizes = new Array();
			for(var i = 0 ; i < 100 ; i++){
				snow_x[i] = Math.random()*canvas.width;
				snow_y[i] = -1*Math.random()*canvas.height;
				fontSizes[i] = Math.random()*30+20;
			}			
			//获取context2d
			var context = canvas.getContext("2d");
			context.fillStyle = "#FFFFFF";
			//setInterval可以定时执行操作
			var speedy = 10;
			var speedx = 5;
			setInterval(function(){
				context.clearRect(0,0,canvas.width,canvas.height);
				for(var i = 0 ; i < 100 ; i++){
					snow_y[i] = snow_y[i] + speedy ;
					if(snow_y[i]>canvas.height){
						snow_y[i] = -1*Math.random()*canvas.height;
					} 
					context.font = fontSizes[i]+"px arial";
					context.fillText("*", snow_x[i], snow_y[i]);
				}
			}, 50);	
	}

</script>
    
    <style type="text/css" >
    	*{
    	margin:0;
    	padding:0;    	
    }
    	html,body{
    	width:100%;
    	height:100%;
    }
    	
    #page1{
    	display: block;
    	width: 100%;
    	height: 100%;
    	background: url(背景图.png);
    	background-size:contain;
    }
    .p1_biankuang1{
    	position:absolute;
    	left:1rem;
    	top:12rem;
    	width: 20rem;
    	height: 20rem;
    	background: url(边框.png);
    	background-size:contain;
    	animation: ja 3s linear infinite;
    	-webkit-animation: ja 3s linear infinite;
    }
    @-webkit-keyframes ja{
    		0%{
    			transform: scale(1);
    		}
    		25%{
    			transform: scale(1.1);
    		}
    		50%{
    			transform: scale(1);
    		}
    		75%{
    			transform: scale(0.9);
    		}
    		100%{
    			transform: scale(1);
    		}
    	}
    	@keyframes ja{
    		0%{
    			transform: scale(1);
    		}
    		25%{
    			transform: scale(1.1);
    		}
    		50%{
    			transform: scale(1);
    		}
    		75%{
    			transform: scale(0.9);
    		}
    		100%{
    			transform: scale(1);
    		}
    	}    	
        
   	.p1_jianzhi{
    	position:absolute;
    	
    	left:5.8rem;
    	right:0;
    	top:16rem;    	   	 	
    	width:10rem;    	   	
    	height:10rem;
    	background:url(剪纸图.png);    
    	background-size:contain; 
    	animation: ha 3s linear infinite;
    	-webkit-animation: ha 5s linear infinite;
    	}    	
    	@-webkit-keyframes ha{
    		from{transform: rotate(0deg);}
    		to{transform: rotate(360deg);}
    	}
    	@keyframes ha{
    		from{transform: rotate(0deg);}
    		to{transform: rotate(360deg);}
    	}      
    .p1_xinnian{
    	position:absolute;
    	
    	top:-2rem;
    	left:3rem; 	
      	width:16rem;    	   	
    	height:16rem;
    	background:url(新年好.png);    
    	background-size:contain;    	  	
    }      
   
   
   	.page1_2 {
		width: 100 % ;
		height: 100 % ;
		background: url(背景图.png);
		background-size: contain;
		animation: pa1 3s;
	}
	@keyframes pa1{
		from{
			opacity: 1;
		}
		to{
			opacity:0.2;
		}
	} 
   
   
   #page2{
    	width: 100%;
    	height: 100%;
    	background: url(背景图.png);
    	background-size:contain;
    }
   	.p_biankuang{
    	position:absolute;
    	
    	left:-1.3rem;
    	right:0;
    	top:0;    	   	 	
    	width:25rem;    	   	
    	height:30.48076923076923rem;
    	background:url(边框图.png);    
    	background-size:contain;    	
    }
    .p_xiushi{
    	position: absolute;
    	left: 3rem;
    	top: -3.5rem;
    	width: 15rem;
    	height: 19.58359621451104rem;
    	background: url(修饰图.png);
    	background-size: contain;	
    }
    .p_nianfen{
    	position: absolute;
    	left: 3.5rem;
    	top: 5rem;
    	width: 16rem;
    	height: 16rem;
    	background: url(年份图.png);
    	background-size: contain;	
    	animation: ja 3s linear infinite;
    	-webkit-animation: ja 3s linear infinite;
    }
    @-webkit-keyframes ja{
    		0%{
    			transform: scale(1);
    		}
    		25%{
    			transform: scale(1.1);
    		}
    		50%{
    			transform: scale(1);
    		}
    		75%{
    			transform: scale(0.9);
    		}
    		100%{
    			transform: scale(1);
    		}
    	}
    	@keyframes ja{
    		0%{
    			transform: scale(1);
    		}
    		25%{
    			transform: scale(1.1);
    		}
    		50%{
    			transform: scale(1);
    		}
    		75%{
    			transform: scale(0.9);
    		}
    		100%{
    			transform: scale(1);
    		}
    	}
    .p_jinji{
    	position: absolute;
    	left:4rem;
    	top:16rem;
    	
    	width: 14rem;
    	height: 14rem;
    	background: url(金鸡图.png);
    	background-size: contain;	
    	
    }
    .p_paozhu{
    	position: absolute;    	
    	
    	bottom:10rem;
    	width: 4.5rem;    	
    	height:6rem;
    	background: url(炮竹图.png);
    	background-size: contain;	    	
    }
    #p1{
    	left:0;
    }
    #p2{
    	right:0.5rem;
    }
    .p_xiaohai{
    	position: absolute;
    	left:4rem;
    	bottom:0rem;
    	
    	width: 15rem;
    	height: 15rem;
    	background: url(小孩图.png);
    	background-size: contain;  	
    	
    	/*animation:ma 2s liner 0s infinite alternate;
		-webkit-animation:ma 2s linear 0s infinite;*/
		
		animation: xa 2s linear infinite;
    	-webkit-animation: xa 2s linear infinite;
    }
    @-webkit-keyframes xa{
    		0%{
    			transform: scale(1);
    		}
    		25%{
    			transform: scale(1.1);
    		}
    		50%{
    			transform: scale(1);
    		}
    		75%{
    			transform: scale(0.9);
    		}
    		100%{
    			transform: scale(1);
    		}
    	}
    	@keyframes xa{
    		0%{
    			transform: scale(1);
    		}
    		25%{
    			transform: scale(1.1);
    		}
    		50%{
    			transform: scale(1);
    		}
    		75%{
    			transform: scale(0.9);
    		}
    		100%{
    			transform: scale(1);
    		}
    	}    
    </style>    
    
</head>
<body>
	<div id="page1" class="page1">			
		<div class="p1_biankuang1"></div>
		<div id="p1_jianzhi" class="p1_jianzhi"></div>
		<div class="p1_xinnian"></div>		
	</div>	
		
	<div id="page2" class="page2" style="display: none;">
		<canvas id="canvas"></canvas>
		<div class="p_biankuang"></div>
		<div class="p_xiushi"></div>
		<div class="p_nianfen"></div>
		<div class="p_jinji"></div>
		<div class="p_paozhu" id="p1"></div>
		<div class="p_paozhu" id="p2"></div>
		<div class="p_xiaohai"></div>
	</div>
		
</body>
</html>